<template>
  <div class="condittion">
    <header>
      <h1>关联显示</h1>
      <div>
        <a-checkbox v-model="info.isExecute"> 是否启用 </a-checkbox>
        <span class="cursor-pointer" @click="addCondittion"><a-icon type="plus-circle" /></span>
      </div>
    </header>
    <div>
      <!-- 条件约束填写信息表头 Start -->
      <a-row type="flex" justify="center" :gutter="[16, 0]" style="margin-bottom: 0.9375rem">
        <a-col v-for="(item, index) in singLetonTitleList" :key="index" class="flex-justify-center" :span="item.span">
          {{ item.name }}
        </a-col>
      </a-row>
      <!-- 条件约束填写信息表头 End -->
      <!-- 条件约束填写信息内容 Start -->
      <div class="list-box">
        <a-row class="row-class" type="flex" justify="center" :gutter="[16, 0]"
          v-for="(ditem, dindex) in info.associationList" :key="dindex">
          <a-col class="flex-justify-center" :span="2" :order="1">
            {{ dindex + 1 }}
          </a-col>
          <!-- 约束类型 -->
          <a-col class="flex-justify-center" :span="5" :order="2"><a-select size="small" style="width: 100%"
              v-model="ditem.IsAllow" :disabled="!info.isExecute">
              <a-select-option v-for="constraintItem in isAllowList" :key="constraintItem.type">
                {{ constraintItem.name }}
              </a-select-option>
            </a-select>
          </a-col>
          <!-- 条件类型 -->
          <a-col class="flex-justify-center" :span="5" :order="3">
            <a-select size="small" style="width: 100%" v-model="ditem.LimitedOperate" :disabled="!info.isExecute">
              <a-select-option v-for="limitedItem in dataLimitedList" :key="limitedItem.LimitedID">
                {{ limitedItem.LimitedOperate }}
              </a-select-option>
            </a-select>
          </a-col>
          <a-col class="flex-justify-center" :span="5" :order="4">
            <a-input size="small" v-model="ditem.Keywords" :disabled="!info.isExecute" /></a-col>
          
          
          <a-col class="flex-justify-center" :span="5" :order="5">
            <a-select size="small" style="width: 100%" v-model="ditem.ChangeJobItemID" :disabled="!info.isExecute">
              <a-select-option v-for="calcitem in info.calculationNumList" :key="calcitem.JobItemID">
                {{ calcitem.JobItemName }}
              </a-select-option>
            </a-select>
          </a-col>
          <a-col class="flex-justify-center" :span="2" :order="12">
            <a-icon type="close" class="cursor-pointer" @click="delterm(ditem, dindex)" />
          </a-col>
        </a-row>
      </div>
      <!-- 条件约束填写信息内容 End -->
    </div>
  </div>
</template>
   
<script>
import { getDictionaryDataSources } from "@/api/PulicBatchRecord"; //约束类型字典
import { getDataLimiteds } from "@/api/DataLimited"; //条件约束
import { delItemShowLimited } from "@/api/JobItemShowLimited"; //删除条件约束
export default {
  props: ["info", "settionItem"],
  data() {
    return {
      constraintTypeList: [], //约束类型
      dataLimitedList: [], //条件类型
      singLetonTitleList: [
        { name: "序号", span: 2 },
        { name: "约束类型", span: 5 },
        { name: "条件类型", span: 5 },
        { name: "条件内容", span: 5 },
        { name: "关联工作项", span: 5 },
        { name: "操作", span: 2 },
      ], //项值表头
      isAllowList: [
        { name: "是", type: true },
        { name: "否", type: false },
      ], //约束类型
    };
  },
  methods: {
    //新增项
    addCondittion() {
      if (!this.info.isExecute)
        return this.$message.error("请先勾选是否约束项再操作");
      this.info.associationList.push({
        ChangeJobItemID: this.info.calculationNumList[0].JobItemID || '', //关联工作项
        Keywords: "", //条件内容
        IsAllow: true || "", //逻辑操作
        LimitedOperate: this.dataLimitedList[0].LimitedID || "", //关系标识
      });
    },
    //删除项
    delterm(item, index) {
      if (!this.info.isExecute)
        return this.$message.error("请先勾选是否约束项再操作");
      let that = this;

      this.$confirm({
        title: "提示",
        content: `是否删除序号【${index + 1}】项`,
        async onOk() {
          if (item.JobItemShowLimitedID) {
            let res = await delItemShowLimited([item]);
            res.Success
              ? that.$message.success("删除成功")
              : that.$message.error(res.Message);
            that.info.associationList.splice(index, 1);
          } else {
            that.info.associationList.splice(index, 1);
          }
        },
        onCancel() { },
      });
    },

    //获取条件类型
    async getDataLimitedsFun() {
      let res = await getDataLimiteds({
        pageRequestModel: {
          pageIndex: 1,
          pageSize: 1000,
        },
        dataTypeID: this.settionItem.DataTypeID,
      });
      if (res.Status == 10000) {
        this.dataLimitedList = res.Data.Data;
      }
    },
  },
  mounted() {
    this.getDataLimitedsFun();
  },
};
</script>
   
<style lang = "less" scoped>
header {
  margin: 0.9375rem;
}

.row-class {
  margin-bottom: 0.9375rem;
}

.list-box {
  height: 35rem;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>